<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>隔行换色</title>
		<style>
			tr{
				text-align: center;
			}
		</style>
	</head>
	<body>
		
		<table class="tb" align="center" border="1px" width="70%" style="border-collapse: collapse;">
			<tr>
				<th><input type="checkbox" id="all" />
				<button id="fx">反选</button></th>
				<th>分类ID</th>
				<th>分类名称</th>
				<th>分类描述</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox" name="ck"/></td>
				<td>1</td>
				<td>手机数码</td>
				<td>手机数码类商品</td>
				<td>
					<a href="#">修改</a>
					<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="ck"/></td>
				<td>2</td>
				<td>电脑办公</td>
				<td>电脑办公类商品</td>
				<td>
					<a href="#">修改</a>
					<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="ck"/></td>
				<td>3</td>
				<td>鞋靴箱包</td>
				<td>鞋靴箱包类商品</td>
				<td>
					<a href="#">修改</a>
					<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="ck"/></td>
				<td>4</td>
				<td>家居饰品</td>
				<td>家居饰品类商品</td>
				<td>
					<a href="#">修改</a>
					<a href="#">删除</a>
				</td>
			</tr>
		</table>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/**
			 * 获取指定属性的属性值
			 * 		对象.attr("属性名")	
			 * 		对象.prop("属性名")
			 * 设置元素的指定属性值
			 * 		对象.attr("属性名","属性值")	
			 * 		对象.prop("属性名","属性值")
			 * 
			 *  注：当属性的返回值是boolean类型时，选择使用prop，否则选择attr。
			 */
			
			/**
			 * 全选与全不选
			 */
			// 绑定第一个复选框的点击事件
			$("#all").click(function(){
				// 获取当前复选框的选中状态
				//console.log($(this).prop("checked"));
				// 通过属性选择器获取指定元素 （指定属性名等于指定值）
				//$("[name='ck']").prop("checked",true);
				$("[name='ck']").prop("checked", $(this).prop("checked"));
			});
			
			
			/**
			 * 反选
			 * 	如果复选框被选中，则取消选中；如果未选中，则选中。
			 */
			$("#fx").click(function(){
				// 获取需要被操作的复选框
				// 遍历，判断每个复选框的选中状态
				$("[name='ck']").each(function(){
					$(this).prop("checked", !$(this).prop("checked"));
				});
			});
			
			
		</script>
	</body>
</html>
